<template>
  <div>
    <a-row :gutter="element.componentProps.gutter" class="row-body">
      <template v-for="(col, index) in element.items" :key="index">
        <a-col
          :span="col.componentProps.span"
          :offset="col.componentProps.offset"
        >
          <cell-col-wrap
            :key="element.metaRefresh"
            :col="col"
            :index="index"
            :element="element"
          >
            <div class="draggable-container" v-if="lowCode.isDesigner">
              <draggable
                class="drawing-board"
                v-model="col.items"
                @add="handleAdd($event, index)"
                v-bind="{ group: 'group', animation: 200 }"
                tag="div"
                item-key="key"
                handle=".mover"
                :component-data="{ name: 'fade' }"
                :disabled="
                  lowCode.disabled &&
                  element?.nestedChain?.indexOf('dialog') == -1
                "
              >
                <template #item="{ element: el, index }">
                  <div>
                    <render-parse
                      :element="el"
                      :key="el.key"
                      :index="index"
                      :parent="col"
                      :fatherComponent="element"
                    >
                      <template
                        v-for="(_, name) in $slots"
                        :key="name"
                        #[name]="data"
                      >
                        <slot :name="name" v-bind="data" />
                      </template>
                    </render-parse>
                  </div>
                </template>
              </draggable>
            </div>

            <div class="col-body" v-else>
              <template tag="div" v-for="(el, index) in col.items" :key="index">
                <div v-if="el.key">
                  <render-parse
                    :element="el"
                    :key="el.key"
                    :index="index"
                    :parent="col.items"
                    :fatherComponent="element"
                  >
                    <template
                      v-for="(_, name) in $slots"
                      :key="name"
                      #[name]="data"
                    >
                      <slot :name="name" v-bind="data" />
                    </template>
                  </render-parse>
                </div>
              </template>
            </div>
          </cell-col-wrap>
        </a-col>
      </template>
    </a-row>
  </div>
</template>

<script lang="ts">
import { defineComponent, inject, ref, toRefs } from "vue";
import type {
  LowCodeImp,
  ComponentImp,
  CellImp,
} from "@/components/low-code/core/type";
import cellColWrap from "@/components/low-code/page-designer/components/cell-col-wrap/index.vue";
import { tools } from "@/components/low-code/page-designer/utils";
import clone from "clone";
import { useComponentPretreatment } from "@/components/low-code/page-designer/hooks";

export default defineComponent({
  name: "rowWidget",
  props: ["element"],
  components: { cellColWrap },
  setup(props) {
    const getLowCodeInstance = inject("getLowCodeInstance") as Function;
    const lowCode = getLowCodeInstance() as LowCodeImp;
    const { element } = toRefs(props);
    const component = lowCode.dataCenter[element.value.key] as ComponentImp;

    const handleAdd = (event: { newIndex: number }, itemIndex: number) => {
      const newIndex = event.newIndex;
      let hasKey = false;
      if (element.value.items[itemIndex]) {
        /****
         * 组件预处理
         */
        if (
          useComponentPretreatment(
            lowCode,
            (element.value.items as any)[itemIndex],
            newIndex
          )
        )
          return false;
        hasKey = (element.value.items as any)[itemIndex]["items"][newIndex].key
          ? true
          : false;
        let cacheObject = component.copyItem(
          (element.value.items as any)[itemIndex]["items"][newIndex],
          false
        ) as ComponentImp;
        if (element.value.items[itemIndex]) {
          cacheObject.nestedChain = element.value.nestedChain + "_row";
          (element.value.items as any)[itemIndex]["items"][newIndex] =
            cacheObject;
          lowCode.setcurrentKey(cacheObject.key);
        }
      }
      hasKey && element.value.updateMetaRefresh();
      tools.handleStack.push(clone(lowCode));
    };

    return {
      element,
      handleAdd,
      lowCode,
    };
  },
});
</script>

<style scoped>
.drawing-board {
  min-height: 40px;
}
.drawing-board .cell-wrap {
  outline: 1px dashed #336699;
  padding-bottom: 10px;
}
.drawing-board .a-col {
  height: fit-content;
}
.drawing-board .cell-wrap.active {
  outline: 2px solid #bb40ff;
}
.row-body {
  min-height: 40px;
}
</style>
